import React, { useEffect, useState } from 'react'
import {getList1Api} from '../../api/request'
import { useNavigate } from 'react-router-dom'
import { InfiniteScroll, NavBar } from 'antd-mobile'
import { ProductCard } from 'react-vant'
function index() {
    const [list, setList] = useState([])
    const [page,setPage]=useState(1)
  const nav=useNavigate()
  const getkkk = () => {
    getList1Api().then(res => {
      console.log(res)
      setPage(page+1)
      setList([...list, ...res.data.data])
    })
  }
  useEffect(() => {
    getkkk()
  }, []) 
  const getDetail=(item)=>{
    console.log(item);
     nav('/detail',{state:{item}})
  }
  return (
    <div>
      <NavBar>景区门票列表</NavBar>
      <div>
        {
          list.map(item => {
             return ( 
              <ProductCard
              onClick={()=>getDetail(item)}
                key={item.id}
                num={item.id}
                price={item.data}
                desc={item.title}
                title={item.from}
                thumb={item.image}
              />
            )
          })
        }
      </div> 
       <InfiniteScroll loadMore={getkkk} hasMore={true} />
    </div>
  )
}

export default index